<script setup lang="tsx">
import { computed } from 'vue'

import type { CascaderDiff, CascaderDiffType } from '../../types'
import { ChangedDescription } from './ActionDescription'
import ConfirmBoxCard from './ConfirmBoxCard.vue'

export type ConfirmBoxProps = {
  diff: CascaderDiff[]
}

const props = withDefaults(defineProps<ConfirmBoxProps>(), {
  diff: () => []
})

const getDiffTypeList = (source: CascaderDiff[], type: CascaderDiffType) => {
  return source.filter(({ diffType }) => diffType === type)
}

const diffData = computed<Record<CascaderDiffType, CascaderDiff[]>>(() => {
  return {
    LEVEL: getDiffTypeList(props.diff, 'LEVEL'),
    REGION: getDiffTypeList(props.diff, 'REGION'),
    REGION_LEVEL: getDiffTypeList(props.diff, 'REGION_LEVEL'),
    // SORT: getDiffTypeList(props.diff, 'SORT')
    SORT: []
  }
})

const maxIndex = computed(() => {
  const res =
    Object.values(diffData.value).filter((item) => item.length > 0).length - 1
  return res
})
const diffTypeTitle: Record<CascaderDiffType, string> = {
  LEVEL: '变更层级',
  REGION: '变更区域',
  REGION_LEVEL: '变更区域与层级',
  SORT: '变更排序'
}
const dataGroup: CascaderDiffType[] = [
  'LEVEL',
  'REGION',
  'REGION_LEVEL',
  'SORT'
]
</script>
<template>
  <confirm-box-card title="操作动作">
    <div class="operation-action__table-wrapper">
      <table class="operation-action__table">
        <tbody class="action-table__tbody">
          <template v-for="(item, index) in dataGroup" :key="item">
            <template v-for="(row, i) in diffData[item]" :key="`${item}_${i}`">
              <tr class="action-table__tr" :class="{ 'diff-group': i === 0 }">
                <template v-if="i == 0">
                  <td
                    class="action-table__cell diff-type"
                    :class="{
                      'diff-group': i === 0,
                      'last-diff': index === maxIndex
                    }"
                    :rowspan="diffData[item].length">
                    {{ diffTypeTitle[item] }}
                  </td>
                  <td class="action-table__cell">
                    <changed-description :record="row" />
                  </td>
                </template>
                <td v-else class="action-table__cell">
                  <changed-description :record="row" />
                </td>
              </tr>
            </template>
          </template>
        </tbody>
      </table>
    </div>
  </confirm-box-card>
</template>

<style lang="less" scoped>
.operation-action__table-wrapper {
  border-radius: 4px;
  border: 1px solid #eeeff2;
  overflow: hidden;
  .operation-action__table {
    @apply text-sm/22px;
    width: 100%;
    border-spacing: 0;
    user-select: none;
    .action-table__tr {
      .action-table__cell {
        padding: 8px 16px;
        border-bottom: 1px solid #eeeff2;
        &:not(.diff-type) {
          color: var(--cdn-cascader-color-text-1);
        }
        &.diff-type {
          width: 120px;
          border-right: 1px solid #eeeff2;
          background: #f9fafc;
          white-space: nowrap;
          &.last-diff {
            border-bottom: none;
          }
        }
      }
      &:last-child .action-table__cell {
        border-bottom: none;
      }
    }
  }
}
</style>
